import { Button, Col, Form, Row, Select, Table } from 'antd'
import React from 'react'
import { useState } from 'react'
import MyDatePicker from './MyDatePicker'

export default function BehaviorInteraction() {
  const [selectedDateString, setSelectedDateString] = useState(null)
  return (
    <>
      <Row>
        <Col span={24}>
          <Form layout="inline">
            <Form.Item label="行为选择" name="xw">
              <Select
                style={{ width: 150 }}
                options={
                  [
                    // { label: '1', value: '1' },
                    // { label: '1', value: '1' }
                  ]
                }
              />
            </Form.Item>
            <Form.Item label="时间选择" name="xw">
              <MyDatePicker
                selectedDateString={selectedDateString}
                setSelectedDateString={setSelectedDateString}
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
        <Col span={24} style={{ marginTop: 10 }}>
          <Table
            rowClassName="ant-table-row"
            rowKey="id"
            dataSource={[
              {
                id: 1,
                cn: '收藏',
                cn1: '北京十佳收费露营地',
                cn2: '2022-11-20'
              },
              {
                id: 2,
                cn: '收藏',
                cn1: '北京最好吃的是三家烤串',
                cn2: '2023-05-20'
              },
              {
                id: 3,
                cn: '收藏',
                cn1: '河北热门景区',
                cn2: '2023-12-15'
              },
              {
                id: 4,
                cn: '收藏',
                cn1: '天津必打卡地',
                cn2: '2024-01-20'
              },
              {
                id: 5,
                cn: '收藏',
                cn1: '新春出游三部曲',
                cn2: '2024-05-20'
              },
              {
                id: 6,
                cn: '收藏',
                cn1: '五一我在高速烤羊肉串',
                cn2: '2024-05-02'
              }
            ]}
            columns={[
              { title: '编号', dataIndex: 'id', key: 'id' },
              { title: '用户行为', dataIndex: 'cn', key: 'cn' },
              { title: '内容', dataIndex: 'cn1', key: 'cn1' },
              { title: '参与时间', dataIndex: 'cn2', key: 'cn2' }
            ]}
          />
        </Col>
      </Row>
    </>
  )
}
